<template>
  <s-tabs @getList="getList" @tab-click="tabClick" :rtuIndex="rtuIndex" ref="sTabs" @setLoading="setLoading"
    :loading="loading">
    <template #search>
      <span class="top_span2" style="margin-right: 14px">时间选择：</span>
      <el-date-picker size="mini" @change="handleDatePickerChange" style="width: 400px;" v-model="dataTime"
        :picker-options="options" unlink-panels format="yyyy-MM-dd HH:mm" type="datetimerange" start-placeholder="开始日期"
        end-placeholder="结束日期"></el-date-picker>
      <el-button size="mini" style="margin-right: 10px; margin-left: 22px" type="primary" @click="handleSearch">查
        询</el-button>
      <el-button size="mini" @click="handleReset">重 置</el-button>
    </template>
    <template #list>
      <el-table row-key="id" ref="multiTable" height="calc(100vh - 300px)" :header-cell-class-name="cellClass"
        :data="list" style="width: 100%" :cell-style="{ textAlign: 'center' }" :header-cell-style="{
        background: 'rgba(250, 250, 250, 1)',
        textAlign: 'center',}">
        <el-table-column prop="rtuName" label="传感器名称" width="300px">
          <template slot-scope="scope">
            {{scope.row.rtuIndex+"：" + scope.row.rtuName}}
          </template>
        </el-table-column>
        <el-table-column prop="count" label="总数量" />
        <el-table-column prop="dupCount" label="去重后数量" />
        <el-table-column label="丢数">
          <template slot-scope="scope">
            <span style="color: #F56C6C;">{{ scope.row.loseCount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalMinutes" label="总分钟数" />
      </el-table>
    </template>
  </s-tabs>
</template>

<script>
  import STabs from "@/components/Tabs";
  import { getHistoryData } from "@/api/copy";

  export default {
    components: {
      "s-tabs": STabs
    },
    data() {
      return {
        rtuIndex: null,
        loading: false,
        rtuList: [],
        list: [],
        uuid: "",
        // 日期时间选择框
        dataTime: [],
        startTimeInSecond: "",
        endTimeInSecond: "",
        options: {
          // 时间不能大于当前时间
          disabledDate: time => {
            return time.getTime() > Date.now();
          },
          selectableRange: "00:00:00 - 23:59:59"
        },
      }
    },
    created() {
      this.$message("默认为24小时统计");
    },
    methods: {
      getList() {},
      async handleReset() {
        this.dataTime = [];
        await this.getHistoryData();
      },
      async handleSearch() {
        if (this.dataTime.length == 0) {
          this.$message("请选择筛选条件");
        } else {
          await this.getHistoryData(2);
        }
      },
      handleDatePickerChange() {
        this.startTimeInSecond = new Date(this.dataTime[0]).getTime() / 1000;
        this.endTimeInSecond = new Date(this.dataTime[1]).getTime() / 1000;
      },
      setLoading(isLoading) {
        this.loading = isLoading;
      },
      cellClass(row) {
        if (row.columnIndex === 0) {
          return 'disabledCheck';
        }
      },
      async getHistoryData(type = 1) {
        try {
          this.loading = true;
          const nowTime = Date.now();
          const time = new Date(this.handleFormatter({dataTime: nowTime})).getTime();
          const info = {
            uuid: this.uuid,
            rtuIndex: this.rtuList.map(item => item.rtuIndex),
            startTimeInSecond: type == 2 ? this.startTimeInSecond : (time / 1000 - 86400),
            endTimeInSecond: type == 2 ? this.endTimeInSecond : (time / 1000),
            online: true,
            pageNo: 1,
            pageSize: 100000000
          };
          const { code, result: { data } } = await getHistoryData(info);
          if (code == 0) {
            await this.list.forEach((item, index) => {
              const count = data.filter(nowItem => nowItem.rtuIndex == item.rtuIndex).length;
              const RTUDataList = data.filter(nowItem => nowItem.rtuIndex == item.rtuIndex);
              RTUDataList.forEach(async rtuItem => {
                await this.$set(rtuItem, "dataTime", this.handleFormatter(rtuItem));
              });
              const dupCount = this.unipFun2(RTUDataList).length;
              this.$set(item, "count", count);
              this.$set(item, "dupCount", dupCount);
              if (type == 1) {
                this.$set(item, "loseCount", 1440 - dupCount);
                this.$set(item, "totalMinutes", 1440);
              } else if (type == 2) {
                const totalMinutes = Math.floor((Number(this.endTimeInSecond) - Number(this.startTimeInSecond)) / 60);
                this.$set(item, "loseCount", totalMinutes - dupCount);
                this.$set(item, "totalMinutes", totalMinutes);
              }
            });
            this.$nextTick(() => {
              this.loading = false;
            });
          }
        } catch (error) {
          console.log("获取历史数据接口报错", error);
        }
      },
      unipFun2(arr) {
        let arr1 = [];
        let newArr = [];
        for (let i = arr.length - 1; i >= 0; i--) {
          if (arr1.indexOf(arr[i].dataTime) == -1) {
            console.log(1);
            arr1.unshift(arr[i].dataTime);
            newArr.unshift(arr[i]);
          }
        }
        return newArr;
      },
      handleFormatter(row) {
        return `${new Date(row.dataTime).getFullYear()}-${new Date(row.dataTime).getMonth() + 1}-${new Date(row.dataTime).getDate()} ${new Date(row.dataTime).getHours()}:${new Date(row.dataTime).getMinutes() < 10 ? "0" + new Date(row.dataTime).getMinutes() : new Date(row.dataTime).getMinutes()}`;
      },
      async tabClick(rtuList, uuid) {
        this.rtuList = rtuList;
        this.list = rtuList;
        this.uuid = uuid;
        await this.getHistoryData();
      }
    }
  }
</script>

<style lang="scss">
  .jrmx333 {
    .fenye_div {
      margin-top: 30px;
      text-align: right;
    }

    .table_div {
      height: calc(100vh - 250px);
    }

    .top_span2 {
      /** 文本1 */
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
    }

    .sx_top {
      height: 80px;
      background-color: #fff;
      box-sizing: border-box;
      padding: 0 0 29px 19px;
    }

    .el-tabs__nav-scroll {
      background-color: #fff;
      padding-left: 34px;
    }

    .content_div {
      height: calc(100vh - 150px);
    }

    .el-table td.gutter,
    .el-table th.gutter {
      background-color: rgb(250, 250, 250) !important;
    }

    .el-table__fixed-right-patch {
      background-color: rgb(250, 250, 250) !important;
    }
  }

  .el-dialog__body {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .btn {
    display: flex;
    justify-content: center;
    margin-top: 140px;
  }

  .ball_div {
    box-sizing: border-box;
    padding: 20px;
    padding-top: 0;
    overflow-y: scroll;
    height: calc(100vh - 77px);
  }

  .red {
    color: #f56c6c;
  }

  .green {
    color: #67c23a;
  }
</style>